<template>
  <div>
    <el-table  v-loading="loading" :data="tableData" :header-row-class-name="setHeaderStyle" border :show-summary="showSummary"
               :cell-class-name="tableCellClassName" :header-cell-class-name="tableHeaderCellClassName" :row-class-name="tableRowClassName"
               @selection-change="handleSelectionChange" :row-key="rowKey" :tree-props="treeProps">
      <template v-for="item in columnData">
        <slot v-if="item.slot" :name='item.slot'></slot>
        <el-table-column :type="item.type" v-else :prop="item.prop" align="center" :label="item.label" :width="item.width" :min-width="item.minWidth"
                         :show-overflow-tooltip='item.showOverflowTooltip' :key="item.id"></el-table-column>
      </template>
    </el-table>
    <el-pagination v-if="isPagination" background :current-page="currentPage" :layout="layout"
                   :page-size="tableSize" :total="tableTotal" :page-sizes="pageSizes" @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>
<script>
export default {
  name: 'tableEncapsulation',
  props: {
    treeProps: {
      type: Object,
      default: function () {
        return { hasChildren: 'hasChildren', children: 'children' }
      }
    },
    tableRowClassName: {
      type: Function
    },
    headerCellClass: {
      type: Array,
      default: () => []
    },
    cellClass: {
      type: Array,
      default: () => []
    },
    columnData: {
      type: Array
    },
    currentPage: {
      type: Number
    },
    tableData: {
      type: Array
    },
    tableTotal: {
      type: Number
    },
    tableSize: {
      type: Number,
      default: 10
    },
    isPagination: {
      type: Boolean,
      default: true
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    rowKey: {
      type: String,
      default: null
    },
    layout: {
      type: String,
      default: 'total,prev, pager, next'
    },
    pageSizes: {
      type: Array
    }
  },
  data () {
    return {}
  },
  methods: {
    handleSizeChange (val) {
      this.$emit('sizeChange', val)
    },
    tableHeaderCellClassName ({ column }) {
      const headerCellClass = this.headerCellClass.find(e => e.prop === column.property)
      return headerCellClass ? headerCellClass.className : ''
    },
    tableCellClassName ({ column }) {
      const cellClass = this.cellClass.find(e => e.prop === column.property)
      return cellClass ? cellClass.className : ''
    },
    setHeaderStyle () {
      return 'table-header'
    },
    handleCurrentChange (currentPage) {
      this.$emit('currentPage', currentPage)
    },
    handleSelectionChange (selectionVal) {
      this.$emit('selectionChange', selectionVal)
    }
  },
  mounted () {
  }
}
</script>

<style scoped lang="scss">
.el-table {
  ::v-deep .table-header {
    th {
      background: #f8f8f8 !important;
      color: #222222;
    }
  }
}

.el-pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

</style>
